<template>
  <div id="box">
    <div class="talks">
      <div v-if="this.hotData">
        <h2>热议</h2>
        <hr />
        <div
          class="talks-inner"
          v-for="items in this.hotData"
          :key="items.ctid"
        >
          <div class="item">
            <router-link :to="`/chatdetails/` + items.wcid">
              {{ items.theme }}
            </router-link>
            <em class="el-icon-s-custom">{{ items.name }}</em>
          </div>
          <div class="item">
            <span>
              最新回复:
              <span>
                {{ items.reply }}
              </span>
            </span>
            <span>
              {{ items.rname }}
              <em class="el-icon-chat-square"></em>
            </span>
          </div>
          <hr />
        </div>
      </div>
      <div v-if="this.data">
        <h2>最新</h2>
        <hr />
        <div class="talks-inner" v-for="items in this.data" :key="items.wclid">
          <div class="item">
            <router-link :to="`/chatdetails/` + items.wcid">
              {{ items.theme }}
            </router-link>
            <em class="el-icon-s-custom">{{ items.name }}</em>
          </div>
          <div class="item">
            <span>
              最新回复:
              <span>{{ items.reply }}</span>
            </span>
            <span>
              {{ items.rname }}
              <em class="el-icon-chat-square"></em>
            </span>
          </div>
          <hr />
        </div>
      </div>
    </div>
    <div class="pagination">
      <button @click="minusPage" :disabled="this.page == 1">上一页</button>
      <span>{{ page }}</span>
      <button @click="addPage" :disabled="this.maxPage == page">下一页</button>
      <span>共{{ maxPage }}页</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: "",
      hotData: "",
      page: 1,
      maxPage: 1,
    };
  },

  mounted() {
    this.getData();
    this.getHot();
  },
  //监听页数发生改变
  watch: {
    page() {
      this.getData();
    },
  },
  methods: {
    // 挂载时(页面出生,显示),自动触发请求
    // 发送请求
    getData() {
      const url = "http://127.0.0.1:3000/v1/library/wechat";
      console.log(url);
      this.axios.get(url).then((res) => {
        this.data = res.data;
        console.log("this.data:", this.data);
        this.maxPage = Math.ceil(this.data.length / 10);
        this.data = this.data.slice(10 * (this.page - 1), 10 * this.page);
      });
    },
    getHot() {
      const url = "http://127.0.0.1:3000/v1/library/wechatlist";
      console.log(url);
      this.axios.get(url).then((res) => {
        this.hotData = res.data;
        console.log("this.hotData:", this.hotData);
        this.hotData = this.hotData.slice(0, 5);
        console.log("this.hotData:", this.hotData);
      });
    },
    addPage() {
      this.page += 1;
    },
    minusPage() {
      this.page -= 1;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  user-select: none;
}
ul,
ol {
  list-style: none;
}
*a {
  text-decoration: none;
  color: #000;
}
#box {
  width: 1200px;
  margin: 0 auto;
  .talks {
    // width: 1200px;
    // margin: 0 auto;
    padding-top: 7.5px;

    h2 {
      margin: 15px 20px;
    }

    .talks-inner {
      display: flex;
      flex-direction: column;
    }
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 15px 10px;
      :last-child {
        padding-right: 15px;
        // border: 1px solid black;
      }
      span > span {
        background: #f7f8fa;
        font-size: 14px;
        color: #999;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        // margin-bottom: 8px;
        overflow: hidden;
      }
    }
  }
}
.pagination {
  text-align: center;
  padding: 15px;
  // border: 1px solid black;
  span {
    padding: 0 15px;
  }
  button {
    border-color: hsla(0, 0%, 100%, 0.5);
    border-radius: 5px;
    padding: 5px;
    // border: none;
    // outline: none;
  }
  button:hover {
    background-color: blue;
  }
}
</style>